<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="在线留言.css">
	<script src="jquery-3.4.1.js"></script>
	<script src="在线留言.js"></script>
</head>
<body>
	<!-----------------------------------------------顶部开始------------------------------------------------------>
		<div id="top">
			<div class="logo1">
				<img src="img/h1.jpg" alt="" />
			</div>
			<div class="nav_top">
				<ul id="u">
					<li >
						<img src="img/nico1.png" alt="" />
						<a href="舞蹈.html">网站首页</a> 
					</li>
					<li >
						<img src="img/nico2.png" alt="" />
						<a href="学校加盟.html">学校加盟</a> 
						<ul>
							<li>延安三路校区</li>
							<li>福州北路校区</li>
							<li>鞍山二路校区</li>
							<li>崂山丽达校区</li>
						</ul>
					</li>
					<li >
						<img src="img/nico3.png" alt="" />
						<a href="舞蹈列表.html">童星小主持</a> 
						<ul>
							<li>幼年一级</li>
							<li>幼年二级</li>
							<li>童少一级</li>
							<li>童少二级</li>
							<li>学少一级</li>
							<li>学少二级</li>
						</ul>
					</li>
					<li >
						<img src="img/nico1.png" alt="" />
						<a href="">师资力量</a> 
						<ul>
							<li>普通教师</li>
							<li>中级教师</li>
							<li>高级教师</li>
							<li>特级教师</li>
							<li>校长教师</li>
						</ul>
					</li>
					<li >
						<img src="img/nico2.png" alt="" />
						<a href="">学员风采</a>
						<ul>
							<li>日常训练</li>
							<li>校级奖项</li>
							<li>市级奖项</li>
							<li>省级奖项</li>
							<li>国家级奖项</li>
						</ul>
					</li>
					<li >
						<img src="img/nico1.png" alt="" />
						<a href="">服装租赁</a>
						<ul>
							<li>幼儿装</li>
							<li>童年装</li>
							<li>少儿装</li>
							<li>青年装</li>
						</ul>
					</li>
					<li >
						<img src="img/nico3.png" alt="" />
						<a href="课程介绍.html">课程介绍</a>
						<ul>
							<li>芭蕾舞课程</li>
							<li>中国舞课程</li>
							<li>考级课程</li>
						</ul>
					</li>
					<li >
						<img src="img/nico2.png" alt="" />
						<a href="视屏展示.html">视屏展示</a>
						<ul></ul>
					</li>
					<li >
						<img src="img/nico1.png" alt="" />
						<a href="#">在线留言</a>
						<ul></ul>
					</li>
					<li >
						<img src="img/nico3.png" alt="" />
						<a href="联系我们.html">联系我们</a>
					</li>
				</ul>
			</div>
		</div>
		
		<!-----------------------------------------------顶部结束------------------------------------------------------>


		<!---------------------------------------------在线留言开始----------------------------------------------------->

		<div class="content"> 
			<div class="til_advance"> 
				<h3>新增留言</h3>
				<span>【留言成功后，页面将返回到留言浏览页面】</span>
			</div>
			<div class="box_message"> 
				<form action="" method="post" autocomplete="off">
					<table class="2box" width="100%" height="126" cellspacing="0" border="0" bgcolor="#FFFFFF">
						<tbody>
							<tr>
								<td class="lf_tab"> 
									<span>*</span>
									您的称呼
								</td>
								<td class="rt_tab"> 
									<input class="txt" type="text" maxlength="5" placeholder="请输入您的名字" required/>
								</td>
							</tr>

							<tr>
								<td class="lf_tab"> 
									<span>*</span>
									Email
								</td>
								<td class="rt_tab"> 
									<input class="txt" id="email" type="email" name="email" placeholder="请输入正确的邮箱格式(例如123456@qq.com)"/>
									<span>【此项和“电话联系方式“至少填写一项】</span>
								</td>
							</tr>

							<tr>
								<td class="lf_tab"> 
									<span>*</span>
									电话联系方式
								</td>
								<td class="rt_tab"> 
									<input class="txt" id="tel" type="tel" name="content" pattern='\d\d\d\d\d\d\d\d\d\d\d' placeholder="请输入您的电话(11位)"/>
									<span>【此项和“Email“至少填写一项】</span>
								</td>
							</tr>

							<tr>
								<td class="lf_tab"> 
									<span>*</span>
									留言内容
								</td>
								<td class="rt_tab"> 
									<textarea type="text" name="content" cols="60" rows="5" placeholder="欢迎您的留言：" ></textarea>
								</td>
							</tr>

							<tr>
								<td class="lf_tab"> 
									<span>*</span>
									验证码
								</td>
								<td class="rt_tab"> 
									<table border="0" cellspacing="5" cellpadding="5" width="100%" id="liu"> 
										<tbody>
											<tr >
									            <td valign="middle">
									             <div id="checkCode" class="code"  onclick="createCode(4)" ></div></br>
									             <span onclick="createCode(4)">看不清换一张</span> 
									         </td>
									        </tr>
									        <tr>
									            <td><input type="text" id="inputCode"/></td>
									        </tr>
								    	</tbody>
									</table>
								</td>
							</tr>
							<tr>
								<td class="lf_tab">
								<span>*</span>
								评价
							</td>
								<td class="rt_tab"> 
									<ul class="comment">
									    <li>☆</li>
									    <li>☆</li>
									    <li>☆</li>
									    <li>☆</li>
									    <li>☆</li>
									</ul>
								</td>
							</tr>
							<tr>
								<td ></td>
								<td class="rt_tab"> 
									<input class="btn" type="submit" name="tijiao"  value="提交" onclick="validateCode()"/>
									<input class="btn" type="reset" name="tijiao"  value="清除" />
								</td>
							</tr>
						</tbody>
					</table>
				</form>
			</div>
			
			<script src="jquery-3.4.1.js"></script>
		    <script>
		        $(function () {
		            //获取所有的li绑定鼠标进入和鼠标离开和点击事件
		            $(".comment>li").mouseover(function () {
		                $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
		            }).mouseout(function () {
		                $(this).text("☆").prevAll("li").text("☆");
		                //获取属性index为10的这个li和这个li前面所有的li
		                $(".comment>li[index=10]").text("★").prevAll("li").text("★");

		            }).click(function () {
		                $(this).attr("index","10").siblings("li").removeAttr("index");
		            });
		        });
		    </script>
		</div>

		<!--------------------------------------------在线留言结束结束-------------------------------------------------->

		<!--------------------------------------------------底部开始----------------------------------------------------->
		<div class="foot">
			<div class="foots">
				<div class="flogo">
					<img src="img/h15.jpg" alt="" />
				</div>
				<div class="fbq">
					<div class="fbq_nav">
						<span><a href="">网站首页</a></span>
						<span><a href="">学校介绍</a></span>
						<span><a href="">师资力量</a></span>
						<span><a href="">学员风采</a></span>
						<span><a href="">课程介绍</a></span>
						<span><a href="">服装租赁</a></span>
						<span><a href="舞蹈列表.html">童星小主持</a></span>
						<span><a href="">在线留言</a></span>
						<span><a href="">联系我们</a></span>
					</div>
					<div class="fbq_con">
						<ul>
							<li>	
								青岛红舞裙艺术学校 版权所有    鲁ICP备11016908号
								<a href="">网站地图</a>　
								<span>
									<a href="">
										<img src="http://icon.cnzz.com/img/pic.gif" alt="" />
									</a>
								</span>
								技术支持：<a href="">网络知道</a>
							</li>
							<li>总部校区   电话：0532-83635877 地址：延安三路204号  海信慧园商务楼A座3楼</li>
							<li>福州路校区 电话：0532-68617578 地址：福州北路135号 鼎都一号商务楼411室</li>
							<li>鞍山路校区 电话：0532-83737156 地址：鞍山二路36号  阳光手拉手酒店二楼网点</li>					
							<li>崂山校区 电话：0532-88800877 地址：崂山区仙霞岭路17号金岭世家南区14号楼一单元</li>
							<li>青岛芭蕾舞培训、青岛少儿舞蹈培训、青岛童星小主持,请选择红舞裙艺术学校!</li>
							<li>24小时服务热线：400-0532-905</li>
						</ul>
					</div>
				</div>
				<div class="fweima">
					<img src="img/wms.png" alt="" />
				</div>
			</div>
		</div>
		<!---------------------------------------------底部结束----------------------------------------------------->
</body>
</html>